<template>
	<statusBarVue title="添加证书" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="documents-add-page" :style="pageHaveBarStyle">
		<uni-forms ref="form" :model="formData" :rules="rules" label-position="top" class="form">
			<view class="chunk">
				<uni-forms-item label="证书名称" name="name" required>
					<uni-easyinput v-model="formData.name" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
				<uni-forms-item label="组织名称" name="organization" required>
					<uni-easyinput v-model="formData.organization" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
			</view>
			<view class="chunk">
				<uni-forms-item label="发行时间" name="issueDate" required>
					<uni-datetime-picker type="date" v-model="formData.issueDate" />
				</uni-forms-item>
				<uni-forms-item label="到期时间" name="expireDate" required>
					<uni-datetime-picker type="date" v-model="formData.expireDate" />
				</uni-forms-item>
			</view>
			<uni-forms-item label="照片" name="photo" required>
				<uni-file-picker :limit="1" title="您可以上传照片、视频、word文档、pdf文档等相关附件" v-model="formData.photo"
					fileMediatype="image" mode="grid" @select="select"/>
			</uni-forms-item>
		</uni-forms>

		<button v-if="documentsId === undefined" style="color:#ffffff;backgroundColor:#22A366;"
			@click="handleAddDocument">保存</button>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue'

	import {
		getCheckDocumentsList,
		postAddDocument
	} from '@/utils/api.js';

	import tool_oss from '@/utils/oss';
	
	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		data() {
			return {
				documentsId: undefined,
				formData: {
					photo: []
				},
				rules: {
					// name:
					name: {
						// 校验 name 不能为空
						rules: [{
							required: true,
							errorMessage: '证书名称不能为空',
						}]
					},
					// organization:
					organization: {
						// 校验 organization 不能为空
						rules: [{
							required: true,
							errorMessage: '组织名称不能为空',
						}]
					},
					// photo:
					photo: {
						// 校验 photo 不能为空
						rules: [{
							required: true,
							errorMessage: '证书照片不能为空',
						}]
					},
					// issueDate:
					issueDate: {
						// 校验 issueDate 不能为空
						rules: [{
							required: true,
							errorMessage: '发行时间不能为空',
						}]
					},
					// expireDate:
					expireDate: {
						// 校验 expireDate 不能为空
						rules: [{
							required: true,
							errorMessage: '到期时间不能为空',
						}]
					}
				}
			}
		},
		components: {
			statusBarVue
		},
		onLoad(options) {
			this.documentsId = options.id;
		},
		methods: {
			// 添加证书
			handleAddDocument() {
				this.$refs.form.validate((err, formData) => {
					if (!err) {
						let postDocumentData = {
							"expire_date": formData.expireDate,
							"issue_date": formData.issueDate,
							"name": formData.name,
							"organization": formData.organization,
							"photo": formData.photo.url
						};

						postAddDocument(postDocumentData).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: '提示',
									content: '证书添加成功！',
									success: function(res) {
										uni.navigateBack(); // 返回上一页
									}
								});
							}
						})
					}
				});
			},
			// 获取上传状态
			select(e) {
				tool_oss.oss.upload(e.tempFiles).then(res => {
					this.formData.photo = res.fileUploadSuccessObj;
				});
			}
		}
	}
</script>

<style lang="scss">
	.documents-add-page {
		margin: auto;
		position: fixed;
		left: 0;
		right: 0;
		background-color: #F2F3F7;
		padding: 10px 2.66vw;
		box-sizing: border-box;
		z-index: 99;
	}
</style>